<template>
  <div>
    <div class="icon">
      <i class="el-icon-edit"></i>
      学生课程
    </div>
    <div class="tables">
      <el-row>
        <el-col :span="24">
          <table width="100%">
            <thead>
            <tr style="background-color: rgb(103,161,255);color:white">
              <th style="width: 120px">时间</th>
              <th style="width: 120px">周一</th>
              <th style="width: 120px">周二</th>
              <th style="width: 120px">周三</th>
              <th style="width: 120px">周四</th>
              <th style="width: 120px">周五</th>
              <th style="width: 120px">周六</th>
              <th style="width: 120px">周天</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(n,i) in tableData" style="height: 70px">
              <!--              {{n}}-->
              <td>
                {{returnLession(i+1)}}
              </td>
              <td v-for="t in n">
                {{t.courseName}}
                <div class="fontsty">
                  {{t.teacherName}} <br>
                  {{t.courseLocation}}
                </div>
              </td>
            </tr>
            </tbody>
          </table>
        </el-col>
      </el-row>
    </div>
  </div>
</template>


<script>
  import {get, post} from "../../../common/request";

  export default {
    name: "ChoseCourse",
    data() {
      return {
        tableData: [
          {
            courseName: "",
            teacherName: "",
            courseLocation: ""
          }
        ],
        table:[]// 设置 空 10行 7列的表格
      }
    },
    methods: {
      createTable() {
        for (let i = 0; i < 10; i++) {
          var row = [];
          for (let j = 0; j < 7; j++) {
            row[j] = {
              courseName: "",
              teacherName: "",
              courseLocation: ""
            }
          }
          this.table[i] = row;
        }
        // console.log(this.tableData);
      },
      getData() {
        // console.log(x)
        //0: {courseName: 'C语言程序设计', courseTime: '1-1-2', courseLocation: '信工楼107', teacherName: '张三'}
        //1: {courseName: '数据库概论', courseTime: '3-1-2', courseLocation: 'C区106', teacherName: '宋老师'}
        // this.tableDate[10][7]
        // 1-1-2
        // day lession
        // 重复2遍  for(var i=0;i<2;i++){
        //  this.tableDate[lession-1+i][day-1]
        //  this.tableDate[lession-1+0][day-1]  //1 0 0
        //  this.tableDate[lession-1+1][day-1]  //1 0 0
        // }
        // 第一次 [0] [0]   第二次 [1] [0]
        //      0    1    2    3    4    5    6
        // 0: [{…}, {…}, {…}, {…}, {…}, {…}, {…}]
        // 1: [{…}, {…}, {…}, {…}, {…}, {…}, {…}]
        // 2: [{…}, {…}, {…}, {…}, {…}, {…}, {…}]
        // 3: [{…}, {…}, {…}, {…}, {…}, {…}, {…}]
        // 4: [{…}, {…}, {…}, {…}, {…}, {…}, {…}]
        // 5: [{…}, {…}, {…}, {…}, {…}, {…}, {…}]
        // 6: [{…}, {…}, {…}, {…}, {…}, {…}, {…}]
        // 7: [{…}, {…}, {…}, {…}, {…}, {…}, {…}]
        // 8: [{…}, {…}, {…}, {…}, {…}, {…}, {…}]
        // 9: [{…}, {…}, {…}, {…}, {…}, {…}, {…}]
        this.createTable();
        get("/rc-student-course/showCourseTimeTable").then(x => {
          var list = x.data;
          for (let i = 0; i < list.length; i++) {
            this.setTimeData(list[i])
          }
          // console.log(this.tableData)
          this.tableData=this.table;
        })
      },
      setTimeData(item) {
        //item ==>{courseName: 'C语言程序设计', courseTime: '1-1-2', courseLocation: '信工楼107', teacherName: '张三'}
        let split = item.courseTime.split("-");
        let day = split[0];
        let lession = split[1];
        let count = split[2];
        // 循环遍历 条件为 count 需要重复的次数(共几节课)
        for (let i = 0; i < count; i++) {
          // 给this.tableDate 进行赋值
          this.table[lession - 1 + i][day - 1] = {
            courseName: item.courseName,
            teacherName: item.teacherName,
            courseLocation: item.courseLocation
          }
        }
      },
      returnLession(num) {
        switch (num) {
          case 1:
            return "第一节";
          case 2:
            return "第二节";
          case 3:
            return "第三节";
          case 4:
            return "第四节";
          case 5:
            return "第五节";
          case 6:
            return "第六节";
          case 7:
            return "第七节";
          case 8:
            return "第八节";
          case 9:
            return "第九节";
          case 10:
            return "第十节";
        }
      }
    },
    created() {
      this.getData();
    },
    mounted() {
      // console.log(1)
      this.getData();
    }
  }
</script>


<style scoped>

  td {
    background-color: rgb(234, 242, 255);
  }

  .fontsty {
    color: grey;
    font-size: 14px;
  }

  .icon {
    color: dimgray;
    line-height: 20px;
    text-align: left;
  }

  .tables {
    background-color: white;
    border-radius: 5px;
    border: 1px solid lightgrey;
    margin-top: 10px;
    padding: 10px 30px 10px 30px;
  }

  .input {
    width: 180px;
  }
</style>
